<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品展示</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/product.css">
</head>
<body>
    <!--导航条-->
  <nav class="navbar navbar-default">
    <div class="container">
      <!-- 右边 -->
      <div class="navbar-header">
        <!-- 按钮 -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- logo -->
        <a class="navbar-brand" href="#" id="logo">潮流服装</a>
      </div>
      <!-- 搜索框 -->
      <form class="navbar-form navbar-right">
        <div class="input-group navbar-right">
          <input type="text" class="form-control" placeholder="请输入衣服名称">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">
              搜索
            </button>
          </span>
        </div>
      </form>
      <!-- 列表 -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="index.html">首页</a></li>
          <li><a href="#" class="a-first">产品展示</a></li>
          <li><a href="art.html">技术展示</a></li>
          <li><a href="concerning.html">关于我们</a></li>
        </ul>
        
      </div>
    </div>
  </nav>

  <!-- 背景图 -->
  <div class="bgd">
      <img src="./产品展示图/tou.jpg" alt="">
  </div>

  <!-- 热门展示 -->
  <div class="product-hot">
      <div class="container">
          <div class="row">
              <div class="col-md-5">
                <div class="hot-da">
                    <img src="./产品展示图/chan2.jpg" alt="">
                </div>
              </div>
              <div class="col-md-7">
                <div class="hot-tu">
                  <h2>SPRIPE</h2>
                  <p>新的起点，新的开始。独特的裁剪将你的性感与强势完美融合。款式宽松遮肉，面料轻柔舒适，后背设计带点性感，上身简约大气。</p>
                  <div class="row chao">
                    <div class="col-sm-6">
                      <div class="hot-img">
                        <div class="img-on">
                          <img src="./产品展示图/chan3.jpg" alt="">
                          <p>竖条纹蝙蝠廓形宽松衬衫连衣裙</p>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="hot-img">
                        <div class="img-on">
                          <img src="./产品展示图/chan1.jpg" alt="">
                          <p>竖条纹蝙蝠廓形宽松衬衫连衣裙</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <a href="#">更 多</a>

                </div>
              </div>
          </div>
      </div>
  </div>


  <!-- 展示 -->
  <div class="yifu">
    <div class="container">
      <div class="row">
        <div class="col-md-3 col-xs-6">
          <div class="yi-quan">
            <img src="./产品展示图/chan4.jpg" alt="">
            <p>条纹拼接圆领长袖T恤白</p>
          </div>
        </div>
        <div class="col-md-3 col-xs-6">
          <div class="yi-quan">
            <img src="./产品展示图/chan5.jpg" alt="">
            <p>条纹拼接圆领长袖T恤白</p>
          </div>
        </div>
        <div class="col-md-3 col-xs-6">
          <div class="yi-quan">
            <img src="./产品展示图/chan6.jpg" alt="">
            <p>条纹拼接圆领长袖T恤白</p>
          </div>
        </div>
        <div class="col-md-3 col-xs-6">
          <div class="yi-quan">
            <img src="./产品展示图/chan7.jpg" alt="">
            <p>条纹拼接圆领长袖T恤白</p>
          </div>
        </div>
        <div class="col-md-3 col-xs-6">
          <div class="yi-quan">
            <img src="./产品展示图/chan8.jpg" alt="">
            <p>条纹拼接圆领长袖T恤白</p>
          </div>
        </div>
        <div class="col-md-3 col-xs-6">
          <div class="yi-quan">
            <img src="./产品展示图/chan9.jpg" alt="">
            <p>条纹拼接圆领长袖T恤白</p>
          </div>
        </div>
        <div class="col-md-3 col-xs-6">
          <div class="yi-quan">
            <img src="./产品展示图/chan10.jpg" alt="">
            <p>条纹拼接圆领长袖T恤白</p>
          </div>
        </div>
        <div class="col-md-3 col-xs-6">
          <div class="yi-quan">
            <img src="./产品展示图/chan11.jpg" alt="">
            <p>条纹拼接圆领长袖T恤白</p>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- 版权 -->
  <div class="footer">
    <div class="container footer-quan">
      <p>版权所有<span class="glyphicon glyphicon-copyright-mark"></span>潮流服装 | bootstrap大作业 保留所有权</p>
    </div>
  </div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</html>